<template>
  <view class="container">
    <view :hover-stay-time="50" class="list-cell b-b m-t" hover-class="cell-hover" @click="navTo('个人资料')">
      <text class="cell-tit">
        个人资料
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view :hover-stay-time="50" class="list-cell b-b" hover-class="cell-hover" @click="navTo('收货地址')">
      <text class="cell-tit">
        收货地址
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view :hover-stay-time="50" class="list-cell" hover-class="cell-hover" @click="navTo('实名认证')">
      <text class="cell-tit">
        实名认证
      </text>
      <text class="cell-more yticon icon-you" />
    </view>

    <view class="list-cell m-t">
      <text class="cell-tit">
        消息推送
      </text>
      <switch checked color="#fa436a" @change="switchChange" />
    </view>
    <view :hover-stay-time="50" class="list-cell m-t b-b" hover-class="cell-hover" @click="navTo('清除缓存')">
      <text class="cell-tit">
        清除缓存
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view :hover-stay-time="50" class="list-cell b-b" hover-class="cell-hover" @click="navTo('关于Dcloud')">
      <text class="cell-tit">
        关于Dcloud
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view class="list-cell">
      <text class="cell-tit">
        检查更新
      </text>
      <text class="cell-tip">
        当前版本 1.0.3
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view class="list-cell log-out-btn" @click="toLogout">
      <text class="cell-tit">
        退出登录
      </text>
    </view>
  </view>
</template>

<script>
import {
  mapMutations
} from 'vuex'
export default {
  data() {
    return {

    }
  },
  methods: {
    ...mapMutations(['logout']),

    navTo(url) {
      this.$api.msg(`跳转到${url}`)
    },
    // 退出登录
    toLogout() {
      uni.showModal({
        content: '确定要退出登录么',
        success: (e) => {
          if (e.confirm) {
            this.logout()
            setTimeout(() => {
              uni.navigateBack()
            }, 200)
          }
        }
      })
    },
    // switch
    switchChange(e) {
      const statusTip = e.detail.value ? '打开' : '关闭'
      this.$api.msg(`${statusTip}消息推送`)
    }

  }
}
</script>

<style lang='scss'>
  page{
    background: $page-color-base;
  }
  .list-cell{
    display:flex;
    align-items:baseline;
    padding: 20upx $page-row-spacing;
    line-height:60upx;
    position:relative;
    background: #fff;
    justify-content: center;
    &.log-out-btn{
      margin-top: 40upx;
      .cell-tit{
        color: $uni-color-primary;
        text-align: center;
        margin-right: 0;
      }
    }
    &.cell-hover{
      background:#fafafa;
    }
    &.b-b:after{
      left: 30upx;
    }
    &.m-t{
      margin-top: 16upx;
    }
    .cell-more{
      align-self: baseline;
      font-size:$font-lg;
      color:$font-color-light;
      margin-left:10upx;
    }
    .cell-tit{
      flex: 1;
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      margin-right:10upx;
    }
    .cell-tip{
      font-size: $font-base;
      color: $font-color-light;
    }
    switch{
      transform: translateX(16upx) scale(.84);
    }
  }
</style>
